<template>
    <div id="event-agent" @click="eventAgent">
        <!--获取节点参数 (data-index、data-name），则在 $event.target.dataset  { index: 'xxx', name: 'xxx' } 中取值 -->
        <p
            v-for="(item, index) in list"
            :key="index"
            :data-name="item.name"
            :data-index="index"
        >
            {{ item.name }}
        </p>
    </div>
</template>

<script>
    export default {
      // js代码
      data() {
          return {
               list: [
                   { id: 1, name: 'kmj1'},
                   { id: 2, name: 'kmj2'},
                   { id: 3, name: 'kmj3'},
                   { id: 4, name: 'kmj4'}
               ]
          }
      },
      methods: {
          // 事件委托
          eventAgent(e) {
             const target = e.target;
             console.log(target )
             // 注意 e.target.nodeName 的元素名是大写的
             if (target  && target.nodeName === "P") {
                 const dataset = target .dataset;
                 console.log('$event.target.dataset : ', dataset ); // $event.target.dataset :  { name: 'xxx', index: 'xxx' }
             }
          }
      }
    }
</script>
